<template>
  <el-card shadow="hover">
    <div class="table-toolbar">
      <!--顶部左侧区域-->
      <div class="flex items-center table-toolbar-left">
        <template v-if="props.title">
          <div class="table-toolbar-left-title">
            {{ props.title }}
            <el-tooltip :content="props.titleTooltip" placement="top" v-if="props.titleTooltip">
              <i class="iconfont icon-question title-icon icon18"></i>
            </el-tooltip>
          </div>
        </template>
        <slot name="tableTitle"></slot>
      </div>

      <div class="flex items-center table-toolbar-right">
        <!--顶部右侧区域-->
        <slot name="toolbar"></slot>

        <!--刷新-->
        <el-tooltip placement="top">
          <template #content>刷新</template>
          <div class="table-toolbar-right-icon" @click="refresh">
            <i class="iconfont icon-shuaxin icon18"></i>
          </div>
        </el-tooltip>

        <!--密度-->
        <el-tooltip placement="top">
          <template #content>密度</template>
          <div class="table-toolbar-right-icon">
            <el-dropdown @command="" trigger="click">
              <span>
                <i class="iconfont icon-midu icon18"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in densityOptions"
                    :key="item"
                    :command="item.value"
                  >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-tooltip>
        <!--表格设置单独抽离成组件-->
        <ColumnSetting />
      </div>
    </div>
    <el-table
      v-bind="$attrs"
      :data="props.data"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :row-key="props.rowKey"
    >
      <el-table-column
        v-for="(col, index) in props.columns"
        :prop="col.prop"
        :key="`${col.prop}_${index}`"
        :label="col.label"
        :fixed="col.fixed"
      >
        <template v-if="$slots[`${col.prop}`]" #default="scope">
          <!-- 自定义字段 插槽-->
          <slot :name="col.prop" v-bind="scope"></slot>
        </template>
        <template v-if="$slots[`${col.prop}.header`]" #header="scope">
          <!-- 自定义字段表头 插槽-->
          <slot :name="`${col.prop}.header`" v-bind="{ column: col, $index: index, ...scope }">{{
            col.label
          }}</slot>
        </template>
      </el-table-column>
      <!-- 自动无数据提示 插槽-->
      <slot name="empty"></slot>
    </el-table>
    <Pagination
      :total="props.data.length"
      @onPageChange="onPageChange"
      :pagination="props.pagination"
    />
  </el-card>
</template>

<script lang="ts" setup>
import Pagination from '@/components/Pagination.vue';
import ColumnSetting from '@/components/Table/src/settings/ColumnSetting.vue';
const props = defineProps({
	title: String,
	titleTooltip: String,
	columns: {
		type: Array,
		default: () => [],
	},
	data: {
		type: Array,
		default: () => [],
	},
	rowKey: {
		type: String || Number,
	},
	pagination: {
		type: Boolean,
		default: true,
	},
	request: {
		type: Function,
		require: true,
	},
});
const densityOptions = [
	{
		label: '紧凑',
		value: 'mini',
	},
	{
		label: '默认',
		value: 'small',
	},
	{
		label: '宽松',
		value: 'medium',
	},
];
const onPageChange = () => {};
const refresh = () => props.request!();
</script>

<style scoped lang="scss">
.table-toolbar {
	display: flex;
	justify-content: space-between;
	padding: 0px 0px 16px;
	&-left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex: 1 1 0%;
		&-title {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 16px;
			font-weight: 600;
			.title-icon {
				cursor: pointer;
				margin-left: 0.25rem;
				color: rgba(156, 163, 175);
				:hover {
					color: #1890ff;
				}
			}
		}
	}
	&-right {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 0%;
		&-icon {
			margin-left: 12px;
			font-size: 16px;
			cursor: pointer;
			color: rgb(51, 54, 57);
			:hover {
				color: #1890ff;
			}
		}
	}
}
.icon {
	font-size: 18px;
}
</style>
